<script src="../router/index.js"></script>
<template>
  <div>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="编号" > </el-table-column>
    <el-table-column prop="name"  label="姓名" > </el-table-column>
    <el-table-column prop="phone"  label="电话" > </el-table-column>
    <el-table-column prop="email"  label="邮箱" > </el-table-column>
    <el-table-column prop="phone"  label="电话" > </el-table-column>
    <el-table-column prop="birthday" label="日期" > </el-table-column>
    <el-table-column prop="address" label="地址"> </el-table-column>
    <el-table-column prop="" label="操作">
      <el-button  type="primary" icon="el-icon-edit" circle></el-button>
      <el-button  type="danger" icon="el-icon-delete" circle></el-button>
    </el-table-column>
  </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :current-page="currentPage"
      :page-size="pageSize"
      align="right"
      @current-change="goPage">
    </el-pagination>
  </div>
</template>

<script>

//导入user.js，必须的
import mockuser from '../js/user';
export default {
  data() {
    return {
      tableData:[],
      total:0,
      currentPage:1,
      pageSize:5
    }
  },
  methods:{
    list(){
      //vue加载完成，发送ajax请求动态获取数据
      this.$http.post("/user/list",{"currentPage":this.currentPage,"pageSize":this.pageSize}).then(res=>{
        var page = res.data.data;
        this.tableData = page;
        this.total=res.data.totals;
        console.debug(this.total)
      })
    },
    goPage(currentPage){
        this.currentPage=currentPage;
        this.list();
    }
  },


  mounted() {
    this.list()
  }
}
</script>

